<template>
    <div class="search-success">
        <section class="logo">
            <img src="@/assets/img/logo.png" alt="" width="150">
        </section>
        <section class="result">
            <p class="result-text">已认证</p>
            <svg-icon iconClass="success" className="result-icon"></svg-icon>
        </section>
        <section class="result-wrapper">
            <p style="margin-bottom: 1.4rem">{{name}}</p>
            <p>该机构为</p>
            <p>科医人认证的</p>
            <p>已升级设备认证机构</p>
<!--            <p v-if="type === 'AOPT'">AOPT超光子认证机构</p>-->
<!--            <p v-else-if="type === 'M22王者之冠'">M22王者之冠认证机构</p>-->
        </section>
        <section class="tip">
            <p>验证未成功的医疗机构</p>
            <p>科医人公司无法保证其使用原厂正品设备</p>
            <p>为保障您的合法权益</p>
            <p>请至已认证的专业医疗机构进行治疗</p>
        </section>
        <section class="btn">
            <div class="back" @click="$router.push({name: 'HospitalVerify'})">返回查询页面</div>
        </section>
        <section class="tel">
            <p>科医人客服热线</p>
            <p>400-810-5811/800-990-5811</p>
        </section>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'searchSuccess',
    computed: {
        ...mapGetters(['name', 'type'])
    },
    mounted () {
       this.$nextTick(() => {
           if (typeof this.name == 'undefined'){
               this.$message.error({
                   message: '没有医院名称,请重新输入',
                   onClose: () => {
                       this.$router.push({name: 'HospitalVerify'})
                   }
               })
           }
       })
    }
}
</script>

<style scoped>
.search-success {
    width: 100%;
    min-height: 100%;
    position: absolute;
    padding-bottom: 4.2rem;
    letter-spacing: .1rem;
}
.logo {
    margin-top: 2rem;
}
.result {
    margin-top: 4rem;
}
.result-icon {
    margin-top:  2rem;
    width: 7rem;
    height: 7rem;
}
.result-text {
    color: #1b1364;
    font-size: 2.2rem;
    font-weight: 500;
}
.result-wrapper {
    width: 100%;
    color: #1b1364;
    font-size: 2rem;
    margin-top: 2rem;
    line-height: 2.4rem;
    font-weight: 400;
}
.tip {
    margin-top: 2rem;
    line-height: 1.8rem;
    font-size: 1rem;
    color: #717171;
    font-weight: 400;
}
.btn {
    position: static;
    bottom: 100px;
    text-align: center;
    width: 100%;
    margin-top: 2rem;
}
.btn .back {
    width: 280px;
    line-height: 3.5rem;
    background-color: #4849bf;
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: .1em;
    font-size: 1.5rem;
}
.tel {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #9b9b9b;
    line-height: 1.4rem;
    bottom: 1.4rem;
}
</style>
